<script setup lang="ts">
interface Props {
  id?: string
  ref?: string
  disabled?: boolean
  immediate?: boolean
  distance?: number
}
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  distance: 0,
  immediate: false
})
const emit = defineEmits(["scroll"])

const onScroll = () => {
  emit("scroll")
}

const toTop = () => {
  if (props.id) {
    const content = document.getElementById(props.id)
    // console.log('content', content)
    if (content) {
      // content.scrollTop = 0
      let top = content?.scrollTop
      const timeTop = setInterval(() => {
        content.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    }
  }
}
defineExpose({
  toTop
})
</script>

<template>
  <div class="scroll">
    <div
      :id="props.id"
      :ref="props.ref"
      class="content"
      :infinite-scroll-disabled="props.disabled"
      :infinite-scroll-distance="props.distance"
      v-infinite-scroll="onScroll"
      :infinite-scroll-immediate="immediate"
    >
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scroll {
  display: flex;
  /* flex-flow: column; */
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &::-webkit-scrollbar {
    width: 0;
  }

  transition: all 0.6s;
}

.content {
  flex-grow: 1;
  height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
  }

  transition: all 0.6s;
}
</style>
